<template>
  <div class="main-content">
    <explore-header @click="getHeaderKey"></explore-header>
    <div class="playlists">
      <ExploreItem v-for="(item,index) in exploreItemArr"  :playlistDetail="playlistDetail" :key="index" :item="item"></ExploreItem>
    </div>
    <div  class="load-more" style="">
      <button class="grey" @click="moreExploreItem" :style="{'display':display}">加载更多</button>
    </div>
  </div>
</template>

<script>
import ExploreItem from './components/ExploreItem';
import ExploreHeader from './components/exploreHeader';


export default {
  name: 'Explore',
  components: { ExploreItem, ExploreHeader },
  data() {
    return {
      exploreItemArr: [],
      cat: '全部',
      tabBtn: ['推荐歌单', '精品歌单', '排行榜'],
      apiCategory: {
        推荐歌单: [
          'getRecommendList', {
            limit: 50,
          },
        ],
        精品歌单: [
          'highquality',
          {
            limit: 50,
            before: 0,
          },
        ],
        排行榜: [
          'toplist', {
            limit: 50,
          },
        ],
      },
      apiType: '',
      params: {},
      func: '',
      moreArr: [],
      total: 50,
      display: 'block',
    };
  },
  created() {
    this.exploreItemArr = this.getHeaderKey('全部');
    if (this.tabBtn.indexOf(this.cat) === -1) {
      this.params = {
        cat: this.cat,
      };
    }
  },
  watch: {
    params(value) {
      return value;
    },
  },
  methods: {
    getHeaderKey(cat) {
      this.cat = cat;
      if (this.tabBtn.indexOf(cat) === -1) {
        this.apiType = 'exploreItemAll';
        const offset = this.exploreItemArr.length;
        this.params = {
          cat: this.cat,
          offset,
        };
      } else {
        this.apiType = this.apiCategory[cat][0];
        this.params = this.apiCategory[cat][1];
      }
      this[`$${this.apiType}`](this.params).then((res) => {
        this.func = {
          exploreItemAll: () => {
            this.total = res.data.total;
            return res.data.playlists;
          },
          getRecommendList: () => {
            this.total = res.data.result.length;
            // console.log(this.total);
            return res.data.result.map((item) => {
              // eslint-disable-next-line no-console
              // console.log(item.picUrl);
              // eslint-disable-next-line no-param-reassign
              item.coverImgUrl = item.picUrl;
              return item;
            });
          },
          highquality: () => {
            this.total = res.data.total;
            return res.data.playlists;
          },
          toplist: () => {
            this.total = res.data.list.length;
            return res.data.list;
          },
        };
        this.exploreItemArr = this.func[this.apiType]();
        this.moreArr = this.exploreItemArr;
        if (this.total <= 50) {
          this.display = 'none';
        } else {
          this.display = 'block';
        }
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    },
    moreExploreItem() {
      // console.log(this.tabBtn.indexOf(this.cat) === -1);
      if (this.tabBtn.indexOf(this.cat) === -1) {
        const offset = this.exploreItemArr.length;
        // eslint-disable-next-line no-console
        this.params = {
          cat: this.cat,
          offset,
        };
      }
      const arr = this.exploreItemArr;
      this.getHeaderKey(this.cat);
      setTimeout(() => {
        this.exploreItemArr = arr.concat(this.moreArr);
      }, 1000);
    },
    playlistDetail(id) {
      this.$router.push({ name: 'playList', params: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.cover-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 44px 24px;
}
.playlists{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 44px 24px;
}
.load-more{
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
button.grey{
    background-color: var(--color-secondary-bg);
    color: var(--color-text);
    opacity: .78;
    border-radius: 8px;
    padding: 8px 16px;
    width: auto;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
button, select {
    font-family: inherit;
}
</style>
